<template>
  <div class="chart-container">
    <ViewChart
      ref="myRef"
      :options="myOption"
    />
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue';
import { EChartsOption } from 'echarts'
import { CDataNode, CVariableDataItem, CGraphEntity, CDynamicDataItem } from 'stores/editorModels';
import { CChartPropertyItem } from 'components/views/chart/chartViewModel';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { getPropValue } from 'src/util/utils'

const ViewChart = defineAsyncComponent(() => import('./ViewChart.vue'));
export default defineComponent({
  name: 'ViewChartArc',
  components: {
    ViewChart
  },
  props: {
    detail: {
      type: Object,
      default: () => {
        return {} as CGraphEntity
      }
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },
  setup (props, context) {
    // 响应数据解构
    const {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    // chart dom,InstanceType获取子组件的类型
    let myRef = ref<InstanceType<typeof ViewChart> | null>(null);
    let param = ref<CChartPropertyItem>({
      title: '',
      xDataNum: 0 //节点数量
    });  //个性化属性

    //数据，初始数据
    let xyData = ref<CDynamicDataItem[]>([
      {
        vid: 1,
        name: '包子',
        value: 50
      },
      {
        vid: 2,
        name: '馒头',
        value: 10
      },
      {
        vid: 3,
        name: '花卷',
        value: 20
      },
      {
        vid: 4,
        name: '粽子',
        value: 20
      }
    ]);

    //chart数据样式
    let myOption: EChartsOption = {
      title: {
        show: true,
        text: '',
        textStyle: {
          fontWeight: 'bolder',
          fontSize: 16
        }
      },
      tooltip: {
        show: true,
        trigger: 'item'
      },
      legend: {
        show: true,         // 图例直接用pie的data中name
        orient: 'horizontal', // 图例列表的布局朝向(horizontal或vertical)
        icon: 'roundRect',
        left: '120',
        tooltip: {    // 鼠标hover提示,图表配置了tooltip后才会生效
          show: true
        }
      },
      series: []
    };

    //动态增加曲线
    const addToChart = (): void => {
      if (myOption.series) {
        //标题
        (myOption.title as any).text = param.value.title;

        //series清空
        (myOption.series as any).length = 0;

        let series_item = {
          //name数据hover显示从data中提取
          data: xyData.value,           // 对应的动态数据
          type: 'pie', // 图表类型
          radius: ['30%', '60%'],
          center: ['50%', '55%'],
          colorBy: 'data',          //饼状颜色从数据中提取，每个不同
          emphasis: {
            scale: true,
            scaleSize: 20
          }
        };

        (myOption.series as any).push(series_item);
      }
    };

    //属性更新
    const configProperty = () => {
      //生成配置属性
      if ((detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let num = 0, i = 0;
        param.value.title = getPropValue('title', detail.value.propsItem);
        num = parseInt(getPropValue('dataNode', detail.value.propsItem));
        if (!isNaN(num)) {
          param.value.xDataNum = num;
        } else {
          showMessage('ChartArc属性类型不正确');
        }
      } else {
        showMessage('ChartArc属性不正确');
      }

      //生成数据节点
      if ((detail.value.dataItem) &&
        (detail.value?.dataItem.length > 0)) {
        xyData.value.length = 0;
        detail.value.dataItem.forEach((item: CDataNode) => {
          xyData.value.push({
            vid: item.variableValue,
            name: item.nodeValue,
            value: 0
          });
        });
      }
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
      addToChart();

      if (myRef.value) {
        myRef.value.updateView();
        myRef.value.onResize();
      }
    }

    // watch dom尺寸变化,调整子控件大小
    watch(() => detail, () => {
      init();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      refreshDynamicData();
    }, { deep: true })

    //挂载组件
    onMounted(() => {
      init();
    });


    return {
      myRef,
      detail,
      myOption
    };
  }
});
</script>

<style lang="scss" scoped>
.chart-container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
}
</style>
